<template>
    <view class="container">
        <!-- 标题 -->
        <view class="Title">{{title}}</view>
        <!-- 发布官方 -->
        <view class="info">
            <view class="auth">非原创</view>
            <view class="care">关心你的</view>
            <view class="school">湖南大学</view>
        </view>
        <!-- 发布时间地点 -->
        <view class="public">
            2024-01-04 19:05 发表于湖南
        </view>
        <!-- 听过 -->
        <view class="listen">
            <uni-icons type="headphones" color="lightsteelblue"></uni-icons>
            21人听过
        </view>
        <view class="des">
            <image src="../../static/auth.gif" mode="" class="schoolmotto"></image>
            <view class="MainBody">
                <view class="Txt">
                    <view class="article">
                        <text>{{article}}</text>
                    </view>
                </view>
            </view>

            <view style="color: gray;margin-top: 40px;display: flex;width: 200px;flex-wrap: wrap;font-size: 17px;">
                <img src="../../static/temperature.jpg" alt="" style="width: 40px;height: 40px;" />
                <view style="display: flex;flex-direction: column;color: lightblue;">
                    <view>10℃·晚霞</view>
                    <view style="font-size: 10px;">AFTERGLOW</view>

                </view>
                <view style="text-align: center;margin-top: 10px;line-height: 35px;">
                    <text>{{t10}}</text>
                </view>

            </view>
            <view style="width: 340px;margin-right: 10%;margin-top: 20px;">
                <img src="../../static/w1.jpeg" alt="" style="width: 100%;" />
                <img src="../../static/w2.jpeg" alt="" style="width: 100%;" />
                <img src="../../static/w3.jpeg" alt="" style="width: 100%;" />
                <view style="color: gray;">▲ 融媒体中心记者团拍摄</view>
            </view>
            
            <view style="color: gray;margin-top: 40px;display: flex;width: 200px;flex-wrap: wrap;font-size: 17px;">
                <img src="../../static/red.png" alt="" style="width: 40px;height: 40px;" />
                <view style="display: flex;flex-direction: column;color: red;">
                    <view>105℃·热爱</view>
                    <view style="font-size: 10px;">LOVE HNU</view>

                </view>
                <view style="text-align: center;margin-top: 10px;line-height: 35px;position: relative; right: 10%;">
                    <text>{{t105}}</text>
                </view>

            </view>
            <view style="width: 340px;margin-right: 10%;margin-top: 20px;">
                <img src="../../static/bulid.jpg" alt="" style="width: 100%;" />
                <view style="color: gray;">▲ 融媒体中心记者团拍摄</view>
            </view>
            
            
            <view class="official">
                <view class="first">
                    <view class="avatar">
                        <img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.NEFYW0LBwOj_fk8ehsNKHwHaG0&w=176&h=185&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
                            alt="avatar" class="avatar-img">
                    </view>
                    <view class="motto">
                        <view class="one">湖南大学</view>
                        <view class="two">实事求是，敢为人先···</view>
                        <view class="two">919篇原创内容</view>
                    </view>
                    <view class="to">
                        <text>></text>
                    </view>
                </view>
                <view class="second">
                    公众号
                </view>
            </view>
            <view class="reprint">
                <view class="com">转载自</view>
                <view class="com">湖南大学官方微信（微信号：</view>
                <view class="com">HNU1926)</view>
                <view class="com">欢迎投稿 邮箱：news@hnu.edu.cn</view>

            </view>
            <view class="look">为湖南大学点“赞”+“在看”！</view>
        </view>
        <view style="color: gray;margin-bottom: 20px;">阅读 2.3万</view>
        <view style="display: flex;justify-content: space-around;">
            <view class="last">
                <view class="sch">
                    <img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.NEFYW0LBwOj_fk8ehsNKHwHaG0&w=176&h=185&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
                        alt="sch-avator" class="avatar-img" />
                </view>
                <view style="color: white;font-size: 15px;">湖南大学</view>
            </view>
            <view style="display: flex;justify-content: space-around;width: 55%;margin-right: 6%;">
                <view class="icon">
                    <uni-icons type="redo-filled" color="lightsteelblue"></uni-icons>
                    <view>分享</view>
                </view>
                <view class="icon">
                    <uni-icons type="gift-filled" color="lightsteelblue"></uni-icons>
                    <view>收藏</view>
                </view>
                <view class="icon">
                    <uni-icons type="pyq" color="lightsteelblue"></uni-icons>
                    <view>46</view>
                </view>
                <view class="icon">
                    <uni-icons type="hand-up-filled" color="lightsteelblue"></uni-icons>
                    <view>276</view>
                </view>

            </view>
        </view>
        <!-- 文章主体 -->

        <!--  -->


    </view>
</template>

<script>
    export default {
        data() {
            return {
                href: 'https://uniapp.dcloud.io/component/README?id=uniui',
                title: '你爱湖大有几度?',
                article: '万物诉寒\n空中的冬意翩翩而至\n气温容易感知\n生活中的温度呢\n细心的你有留意过吗？\n不妨尝试着\n在HNU的专属时光里\n体验生活的温度\n',
                t10: '夕阳落入橘色的海\n晚霞随即映入眼帘\n霞光如少年一般\n启示如虹\n染红了半边天\n灿烂而辽远',
                t105:'这里是湖南大学--\n千年学府 弦歌不绝\n我们爱她的历史悠久\n岳麓藏珠 红楼映雪\n我们爱她的一砖一瓦\n东方红 太阳升\n我们爱她的朝气蓬勃\n······\n这里有湖大人105℃的爱',
            }
        },

        methods: {

        }
    }
</script>

<style scoped>
    .container {
        padding: 20px;
        width: 100%;
        background: black;
    }

    .des {
        display: flex;
        flex-direction: column;
        /* justify-content: center; */
        align-items: center;
    }

    .schoolmotto {
        width: 340px;
        height: 55px;
        margin-right: 10%;
        margin-bottom: 45px;
    }

    .Title {
        font-size: 23px;
        color: white;
        margin-bottom: 20px;
    }

    .info {
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        width: 197px;
    }

    .auth {
        background: gray;
        width: 45px;
        font-size: 14px;
        color: lightgray;
    }

    .care {
        color: gray;
        font-size: 17px;
    }

    .school {
        color: lightsteelblue;
        font-size: 17px;
    }

    .public {
        color: gray;
        font-size: 18px;
        margin-bottom: 10px;
    }

    .listen {
        color: lightsteelblue;
        margin-bottom: 40px;
    }

    .MainBody {

        padding: 5px;
        width: 300px;
        background: lightgrey;
        border-radius: 17rpx;
        margin-right: 10%;
    }

    .Txt {
        width: 300px;
        border-radius: 17rpx;
        color: gray;
        font-size: 18px;
        line-height: 40px;
        font-weight: 400;
        text-overflow: ellipsis;
        letter-spacing: 5px;
        text-align: center;
        border: solid 1px white;
    }

    .article {
        margin-top: 17px;
        margin-bottom: 17px;
    }

    .official {
        background: #1e1e1e;
        width: 300px;
        margin-top: 20px;
        border-radius: 17rpx;
        margin-right: 10%;
        height: 160px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .first {

        width: 260px;
        height: 100px;
        border-bottom: solid 1px #515151;
        margin-top: 20px;
        margin-bottom: 6px;
        display: flex;
        justify-content: space-between;
    }

    .avatar {
        width: 65px;
        height: 65px;
        border-radius: 50%;
        overflow: hidden;
    }

    .avatar-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .motto {
        display: flex;
        flex-direction: column;
        width: 60%;
    }

    .to {
        font-size: 22px;
        color: gray;
        align-self: center;
    }

    .one {
        font-size: 22px;
        color: white;
        margin-bottom: 10px;
    }

    .two {
        font-size: 14px;
        margin-bottom: 4px;
        color: gray;
    }

    .second {
        /* background: red; */
        width: 260px;
        color: gray;
        font-size: 19px;
    }

    .reprint {
        color: red;
        margin-top: 20px;
        margin-bottom: 30px;
        margin-right: 20%;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }

    .com {
        margin-bottom: 7px;
    }

    .look {
        color: red;
        font-size: 20px;
        margin-bottom: 40px;
    }

    .last {
        display: flex;
        justify-content: space-around;
        width: 110px;
    }

    .sch {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        overflow: hidden;
    }

    .icon {
        display: flex;
        flex-direction: column;
        color: lightsteelblue;
    }
</style>